<template>
  <div>
    <div class="titletopXX">
    <van-nav-bar
      size="30"
      :title="title"
      left-arrow
      right-text=""
      :fixed="true"
      @click-left="onClickLeft"
    />
    </div>
    <div class="content">
      <van-form @submit="onSubmit">
        <div class="title">基本信息</div>
        <van-cell-group>
          <van-field
            label-width="120px"
            v-model="formData.unit"
            name="unit"
            label="单位/部室"
            placeholder="请填写单位/部室"
            required
            :rules="[{ required: true, message: '请填写单位/部室信息' }]"
            :readonly="showBtnLogin"
            @click="showBtnLogin ? disableLogin() : ''"
          />
          <van-field
            label-width="120px"
            label="一级部署编号"
            v-model="formData.number"
            name="number"
            placeholder="请填写一级部署编号"
            required
            :rules="[{ required: true, message: '请填写一级部署编号信息' }]"
            :readonly="showBtnLogin"
            @click="showBtnLogin ? disableLogin() : ''"
          />
          <van-field
            label-width="120px"
            label="出行人员"
            is-link
            v-model="formData.person"
            name="person"
            placeholder="请选择出行人员"
            readonly
            required
            @click="jumpToPerson"
            :rules="[{ required: true, message: '请选择出行人员' }]"
          />
        </van-cell-group>
        <div class="title">疗休养信息</div>
        <van-cell-group>
          <van-field
            label-width="120px"
            label="上次疗养时间"
            is-link
            v-model="formData.lastConvalesceDate"
            name="lastConvalesceDate"
            @click="showTime('one')"
            placeholder="请选择上次疗养时间"
            required
            :rules="[{ required: true, message: '请选择上次疗养时间' }]"
            :readonly="true"
          />
          <van-field
            label-width="120px"
            label="疗养类型"
            v-model="formData.convalesceType"
            name="convalesceType"
            placeholder="请填写疗养类型"
            required
            :rules="[{ required: true, message: '请填写疗养类型' }]"
            :readonly="showBtnLogin"
            @click="showBtnLogin ? disableLogin() : ''"
          />
          <van-field
            label-width="120px"
            label="疗养地"
            v-model="formData.destination"
            name="destination"
            placeholder="请填写疗养地"
            required
            :rules="[{ required: true, message: '请填写疗养地' }]"
            :readonly="showBtnLogin"
            @click="showBtnLogin ? disableLogin() : ''"
          />
          <van-field
            label-width="120px"
            label="出行时间"
            is-link
            v-model="formData.travelDate"
            name="travelDate"
            placeholder="请选择出行时间"
            @click="showTime('two')"
            required
            :rules="[{ required: true, message: '请选择出行时间' }]"
            :readonly="true"
          />
          <van-field
            label-width="120px"
            label="备注"
            v-model="formData.remark"
            name="remark"
            placeholder="请填写备注信息"
            :readonly="showBtnLogin"
          />
        </van-cell-group>
        <van-popup v-model:show="showDatePick" position="bottom">
          <van-datetime-picker
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirm"
            @cancel="showDatePick = false"
            v-model="currentDate"
            type="date"
            title="选择年月日"
          />
        </van-popup>
        <van-popup v-model:show="showConfirmMessage" position="bottom" :style="{ height: '45%' }">
          <div style="font-size: 12px; padding: 5px 15px">
            <h3 style="text-align: center">职工疗养承诺书</h3>
            <div>1﹒遵守疗养纪律、规范个人行为是疗养职工及其随行亲属必须履行的义务。</div>
            <div>
              2﹒疗养期间疗养职工及其随行亲属应遵守公司有关规定，填写办理《职工疗养审批表》等，并妥善保管。
            </div>
            <div>3﹒疗养职工应正确处理工作和疗养的关系，做好疗养期间的工作代理安排。</div>
            <div>4.职工疗休养必须由工会统一组织开展，严禁职工自行联系疗养机构出行。</div>
            <div>5.职工应在一个周期的同一个年度内完成疗养，不得跨年累计。</div>
            <div>6.职工报名后如因个人原因取消出行，造成的费用损失由职工个人承担。</div>
            <div>
              7.职工疗养主要采取驻点集中疗养方式，由实施部门统一组织。驻点疗养的目的是让职工放松身心、好好休息，不得安排职工到多地点往返出行，难以轻松度假。原则上职工在到达疗养目的地后一直住宿在该城市（需要必经中转的城市例外），外出考察观光应在当天往返。确实无法在当天往返的，最多安排在定点城市以外的一个地点住宿。
            </div>
            <div>
              8.职工分段疗养不超过3段，且不得跨年度使用。对于省外分段疗养和自助疗养，由工会统一确定疗养路线、地点、行程，向职工公布，供职工选择。对于省内分段疗养、自助疗养，职工要提前告知工会疗养地点和需求，由工会安排疗养机构安排行程。
            </div>
            <div>9.省外疗养，必须通过疗养机构统一安排大小交通及车辆，禁止职工个人自驾出行。</div>
            <div>
              10﹒疗养职工应主动接受并遵守单位关于职工疗养期间纪律约束和行为规范的教育培训，并确保随行亲属知晓和遵守相关要求。
            </div>
            <div>
              11﹒疗养职工子女原则上为小学及以上（年满6周岁）的子女；职工父母应身体健康且70周岁以内，每位家属至少1名职工陪同。疗养职工应关注自身及随行家属的身心健康，不适应出行的职工及家属严禁参加疗养。如身体状况不佳或在诊疗期间身体不适，应及时终止疗养。
            </div>
            <div>
              12﹒疗养职工及其随行亲属要严格按照疗养行程中规定的时限往返工作地和疗养地，疗养期间不得擅自离开疗养地。
            </div>
            <div>
              13﹒疗养期间疗养职工及其随行亲属应增强自我安全保护意识，关照好同行人员，确保人身和财产安全；注意饮食安全，防止食物中毒；不得发生赌博、酗酒、斗殴、进出色情场所等有损个人和公司形象的行为。
            </div>
            <div>
              14﹒疗养职工及其随行亲属应尊重疗养所在地的宗教信仰、民族习惯和风土人情，遵守所在地关于疫情防控、社会治安等管理规定。
            </div>
            <div>
              15﹒疗养期间疗养职工应增强信息安全和保密意识，不得携带与工作有关的文件资料，不得在网上传播涉及企业商业机密的信息，不得携带有企业标识的物品。
            </div>
            <div>16﹒疗养职工及其随行亲属因个人原因中途中断疗养行程的，视作已经完成疗养。</div>
            <div>
              17﹒疗养职工及其随行亲属要严格按照疗养行程安排确定出行方式，不得擅自变更出行方式。
            </div>
            <div>
              18﹒对疗养职工及其随行亲属不遵守国家法律法规、公司有关规定，给公司造成负面影响的，将根据情节追究所在单位领导、相关管理人员和当事人的责任。如因政策变动或不可抗力（地震、洪水等）原因引起的意外伤害，公司不负担法律及民事责任。
            </div>
            <div style="margin-top: 5px; font-size: 14px">
              本人已认真阅读《职工疗养承诺书》，对疗养纪律要求和存在的安全风险有了明确的认识。我承诺在疗养期间严格遵守组纪律，自觉规范个人行为，我将全程对随行家属的安全与行为负责，确保家属遵守出行过程中的各项法律法规、社会公德及相关场所规定，密切关注家属的身体和精神状态，若因发生违规事件，或提供虚假信息造成的一切后果由本人承担。
            </div>
            <div style="margin: 20px">
              <van-button block color="#36c2a8" @click="confirmForm"> 我已阅读并同意 </van-button>
            </div>
          </div>
        </van-popup>
        <div style="margin: 20px; display: flex; justify-content: space-around; flex-wrap: nowrap">
          <div>
            <van-button
              plain
              hairline
              color="#36c2a8"
              @click="jumpToJL"
              style="letter-spacing: 1px"
            >
              登记记录
            </van-button>
          </div>
          <div>
            <van-button plain hairline color="#36c2a8" @click="jumpToPerson">
              常用出行人
            </van-button>
          </div>
          <div v-if="!showBtnLogin">
            <van-button square color="#36c2a8" native-type="submit" style="letter-spacing: 1px">
              立即登记
            </van-button>
          </div>
          <div v-else>
            <div>
              <van-button @click="disableLogin" square color="#97DED3" style="letter-spacing: 1px">
                立即登记
              </van-button>
            </div>
          </div>
        </div>
        <div style="height: 20px"></div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { getAccessToken } from "../../common/YYSLxx.js"
import imageCompression from "browser-image-compression"
import moment from "moment"
import { Toast } from "vant"
import { getServiceOrderUserList } from "@/api/realAssets/icsharedstation/DD/index.js"
import { getpersonalInformation } from "../../common/RYXX"
export default {
  data() {
    return {
      title: "疗养登记",
      orderNumber: "",
      activeIndex: 0,
      timeType: "",
      baseList: [],
      list: [],
      showBtnLogin: false,
      showConfirmMessage: false,
      imgshow: false,
      imgyaso: "",
      minDate: new Date(new Date().getFullYear(), 0, 1),
      maxDate: new Date(new Date().getFullYear(), 12, 31),
      currentDate: "",
      showDatePick: false,
      siteData: JSON.parse(localStorage.getItem("siteData")) || {},
      formData: {
        unit: "", // 单位/部室
        number: "", // 一级部署编号
        employeeName: "", // 员工姓名
        convalesceType: "", // 疗养类型
        lastConvalesceDate: "", // 上次疗养时间
        destination: "", // 疗养地区
        travelDate: "", // 出行时间
        remark: ""
      }
    }
  },
  methods: {
    showTime (val) {
      this.showDatePick = true
      if (val == "one") {
        this.minDate = moment().subtract(2, "years").toDate()
        this.maxDate = moment().toDate()
        this.currentDate = moment().toDate()
        this.timeType = "one"
      } else if (val == "two") {
        this.minDate = new Date()
        this.maxDate = new Date(new Date().getFullYear(), 12, 31)
        this.currentDate = moment().toDate()
        this.timeType = "two"
      }
    },
    onConfirm (val) {
      let date = moment(val).format("YYYY-MM-DD")
      if (this.timeType == "one") {
        this.formData.lastConvalesceDate = date
      } else if (this.timeType == "two") {
        this.formData.travelDate = date
      }
      this.showDatePick = false
    },
    onSubmit () {
      this.showConfirmMessage = true
    },
    confirmForm () {
      this.showConfirmMessage = false
      this.YYXX()
    },
    // afterRead (file) {
    //   compressImage(file.content).then((compressedBase64) => {
    //     this.imgyaso = compressedBase64
    //     for (let i = 0; i < compressedBase64.length; i += 5000) {
    //       this.baseList.push(compressedBase64.slice(i, i + 5000))
    //     }
    //     console.log(this.baseList)
    //   })
    // },
    jumpToPerson () {
      localStorage.setItem("LYDJform", JSON.stringify(this.formData))
      this.$router.push({
        path: "icsharedstation_LYDJ_CYCXRusually"
      })
    },
    jumpToJL () {
      localStorage.setItem("LYDJform", JSON.stringify(this.formData))
      this.$router.push({
        path: "icsharedstation_LYDJ_DJJL"
      })
    },
    YYXX () {
      this.formData.convalesceEntourageList = JSON.parse(localStorage.getItem("LYDJcxr"))
      let itemXX = {
        SBBT: this.title,
        orderNumber: this.orderNumber, //预约编号
        siteId: this.siteData.id,
        goodInfo: [
          {
            ...this.formData
          }
        ],
        orderProject: this.title, //预约项目
        orderProjectType: "1", //0:   1:  (区分健康自测类型与其他类型)
        orderCreationTime: moment().format("YYYY-MM-DD"), //下单时间
        estimateArrivalTime: "", //预计上门时间
        estimateSumPrice: "", //预估费用
        orderSubType: this.title, //预约类型
        serviceDescription: "", //服务介绍
        orderLocation: "", //预约地址(非空展示)
        serviceTip: "", //温馨提示(非空展示)
        goodSumPrice: "", //总价
        serviceTitleList: ["", "", "", ""], //服务标题
        goodList: []
      }
      // let li = encodeURIComponent(JSON.stringify(itemXX))
      // uni.navigateTo({
      // 	url: `/pages/SXT/faceImg?YYXQxx=` + li
      // })
      //绘制打印信息
      getAccessToken(itemXX, this.title)
    },
    // 压缩图片
    // async compressImage(base64) {
    //   try {
    //     // 将base64转换为Blob
    //     const blob = await fetch(base64).then((res) => res.blob())
    //     const options = {
    //       maxSizeMB: 10, // 最大文件大小(MB)
    //       maxWidthOrHeight: 800, // 最大宽度或高度
    //       useWebWorker: true, // 使用WebWorker加速
    //       fileType: "image/jpeg" // 输出格式
    //     }

    //     const compressedBlob = await imageCompression(blob, options)
    //     return new Promise((resolve) => {
    //       const reader = new FileReader()
    //       reader.onload = () => resolve(reader.result)
    //       reader.readAsDataURL(compressedBlob)
    //     })
    //   } catch (error) {
    //     console.error("压缩失败:", error)
    //     return base64 // 失败时返回原始图片
    //   }
    // },
    queryOrder () {
      getServiceOrderUserList({
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        postId: JSON.parse(getpersonalInformation()).postId,
        pageNumber: 1,
        pageSize: 999,
        orderStatus: "0",
        orderTime: "",
        orderNumber: "",
        userId: JSON.parse(getpersonalInformation()).userId
      })
        .then((res) => {
          if (res.resultMessage == "SUCCESS") {
            console.log(res)
            if (res.data.length > 0) {
              this.showBtnLogin = true
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onClickLeft () {
      this.$router.push({
        path: "/LYDJ/index"
      })
    },
    disableLogin () {
      Toast.fail("您已登记过行程，请取消报名后尝试更换行程")
    }
  },
  mounted () {
    const currentTimeStamp = moment().unix()
    const min = BigInt("1" + "0".repeat(18)) // 10^18
    const max = BigInt("1" + "0".repeat(19)) // 10^19
    const randomNum = min + BigInt(Math.floor(Math.random() * Number(max - min)))
    this.orderNumber = currentTimeStamp + randomNum.toString()
    if (JSON.parse(localStorage.getItem("LYDJform")).destination) {
      this.formData = JSON.parse(localStorage.getItem("LYDJform"))
    }
    this.queryOrder()
  }
}
</script>

<style lang="less">
.content {
  background-color: #f8fbff;
  transform: none;
}
.title {
  font-size: 16px;
  margin: 10px;
  color: #8b929d;
}
.van-field {
  height: 60px;
}
.van-field__error-message {
  height: 20px; /* 固定高度 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.titletopXX{
  height: 45px;
}
</style>
